<template>
	<view class="wrap" @click="goDetail">
		<view class="leftContent">
			<text class="tag">{{activityType|activityType}}</text>
			<view class="tag2" v-if="isReferralBonuses == 0">推荐奖励</view>
			<image class="img" :src="activityUrl" mode=""></image>
		</view>
		
		<view class="rightContent">
			<view class="title">
				{{activityTitle}}
			</view>
			<view class="finishTimeWrap"  v-if="finishTime != 0">
				距离活动结束还有
				<text class="finishTime">{{duration}}</text>
			</view>
		  <view class="applyWrap">
			  <view class="applyNum">
			  	<text>已报名:</text>
				<text class="finishTime">{{applyCount + '人'}}</text>
			  </view>
				<view class="join">
					立即参加
				</view>
		  </view>
			
		</view>
	</view>
</template>

<script>
	export default {
		name: 'activity-cell',
		data() {
			return {
				duration : ''
			}
		},
	props:{
		//活动id
		activityId: {
			type: String,
			default: ''
		},
		// 活动图片
		activityUrl:{
			type:String,
			default:''
		},
	    // 活动类型字符串
		activityType: {
		   type:Number,
		   default:-1
		},
		//优惠类型
		couponType: {
			type:String,
			default:''
		},
		//活动标题
		activityTitle: {
			type:String,
			default:'一键加油 立减20元'
		},
		//距离活动结束时间
		finishTime: {
			type:Number,
			default: 0
		},
		//报名人数
		applyCount: {
			type:String,
			default:'100'
		},
	  //是否推荐奖励
		isReferralBonuses: {
			type: Number,
			default: 1
		}
	},
	computed: {
	  isLogin() {
		  return this.$store.state.user.isLogin;
	  }	
	},
	mounted() {
	 this.getDuritionTime();
	},
	
	methods: {
		 getDuritionTime() {
			 //获取当前时间的毫秒值
			 var date = new Date();
			 var timestap = date.getTime();
			 //时间差
			 var difftime = (this.finishTime*1000 - timestap)/1000;	
			 var days = parseInt(difftime/86400); //天
			 var hours = parseInt(difftime/3600)-24*days; //时
			 this.duration = days + '天' + hours + '小时';
		 },
		 
		 goDetail() {
		 	let urls = [
		 		'/pagesB/activity/activityDetail-secondKill',
		 		'/pagesB/activity/activityDetail-gather'
		 		];
		
			if(this.activityType == 3) {//同行活动
			  if(isLogin) {
				  uni.navigateTo({
				  	url: urls[this.activityType-1] + '?bizNo=' + this.activityId
				  })
			  }else {
				  uni.navigateTo({
				  	url: '/pages/login/login'
				  })
			  }
			 
			}else {
				uni.navigateTo({
					url: urls[this.activityType-1] + '?bizNo=' + this.activityId
				})
			}
		 }
		},
		
}
</script>

<style lang="scss" scoped>
.wrap {
	background-color: #fff;
	border-radius: 16upx;
	margin: 30upx;
	.leftContent {
		width: 100%;
		height: 260upx;
		position: relative;
		.img {
			width: 100%;
			height: 260upx;
		}
		.tag {
			position: absolute;
			left: 10upx;
			top: 10upx;
			background-color: #000000;
			color: #FFD394;
			padding: 12upx 14upx;
			border-radius: 8upx;
			font-size: 20upx;
		}
		
		.tag2{
			position: absolute;
			bottom: 30upx;
			right: 0upx;
			font-size: 20upx;
			font-weight: bold;
			padding: 0 14upx;
			color: #232323;
			line-height: 38upx;
			background: linear-gradient(#fffcde 0%, #ffd291 100%);
			border-radius: 8upx 0px 0px 8upx;
			box-sizing: border-box;
		}
		
	}
	

	
	.rightContent {
		width: 100%;
		padding: 20upx;
		display: flex;
		flex-direction: column;
		
		.title {
			font-size: 28upx;
			font-weight: bold;
			margin-bottom: 20upx;
			// white-space: nowrap;
			// text-align: center;
			// overflow: hidden;
			// text-overflow: ellipsis;
		}
		.finishTimeWrap {
			display: flex;
			color: #333;
			font-size: 20upx;
			margin-top: 10upx;
		}
	}
}

.applyWrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #333;
	font-size: 20upx;
	.applyNum {
		text{
			color: $text-color-33;
			font-size: 20upx;
		}
		.finishTime {
			color: #EC4863;
			margin-left: 10upx;
			font-size: 20upx;
			font-weight: bold;
		}
	}
	
	.join {
	  background-color: $main-color;
	  color: #FFFFFF;
	  height: 50upx;
	  line-height: 50upx;
	  text-align: center;
	  padding: 0 20upx;
	  font-size: 24upx;
	  font-weight: bold;
	  border-radius: 8upx;
	  position: relative;
	  right: 40upx;
	  
	}
}




</style>
